<template>
  <div id="blog-main" :class="[$route.meta.home ? 'home' : '', loading ? 'loading' : '']">
    <div class="loader-wrapper" v-if="$route.meta.loading && this.loading">
      <div class="loader">
        <div class="pacman">
          <div class="eat1"></div>
          <div class="eat2"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
      </div>
    </div>
    <main-header v-if="!$route.meta.noNav" />
    <div class="blog-home">
      <!-- 后台管理 -->
      <template v-if="$route.meta.showMenu">
        <div class="blog-manage">
          <main-menu class="blog-manage-menu" />
          <div class="blog-manage-content">
            <keep-alive>
              <router-view></router-view>
            </keep-alive>
          </div>
        </div>
      </template>
      <!-- 前端展示 -->
      <template v-else>
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </template>
    </div>

    <div class="copyright" v-if="!$route.meta.noNav && !$route.meta.noFooter">
      <h1>BLOG</h1>
      <p class="margin">© 2020 Blog 版权所有 网站备案号: 京IPC备000000000-1号</p>
      <p><span>服务条款</span><span>隐私政策</span><span>法律申明</span></p>
    </div>
    <login-dialog ref="login" />
  </div>
</template>

<script>
import mainHeader from './main-header-item.vue'
import mainMenu from './main-menu-item.vue'
import loginDialog from '../common/login.vue'
export default {
  components: {
    mainHeader,
    mainMenu,
    loginDialog
  },
  created() {
    this.loading = true
    this.timer = setInterval(() => {
      if (document.readyState === 'complete') {
        this.loading = false
        this.timer = null
      }
    }, 500)
  },
  data() {
    return {
      timer: null,
      loading: false
    }
  }
}
</script>

<style lang="scss">
#blog-main {
  position: relative;
  &.home {
    min-width: 1190px;
    background-image: url('~@/assets/img/Home2.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    background-position: center center;
  }
  .loader-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 999;
    background: rgba(255, 255, 255, 0.8);

    .loader {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      .pacman {
        .eat1 {
          border-right: 25px solid transparent;
          border-top: 25px solid rgb(148, 177, 255);
          border-left: 25px solid rgb(148, 177, 255);
          border-bottom: 25px solid rgb(148, 177, 255);
        }
        .eat2 {
          border-right: 25px solid transparent;
          border-top: 25px solid rgb(148, 177, 255);
          border-left: 25px solid rgb(148, 177, 255);
          border-bottom: 25px solid rgb(148, 177, 255);
        }
        .dot {
          background: rgb(148, 177, 255);
        }
      }
    }
  }

  .blog-home {
    margin-top: 30px;
    .blog-manage {
      display: flex;
      margin: 0 20px;
      .blog-manage-content {
        padding: 20px 30px;
        margin-left: 20px;
        width: 100%;
        min-width: 944px;
        min-height: 800px;
        background: #fff;
        border-radius: 10px;
      }
    }
  }
  .copyright {
    min-width: 1190px;
    margin-top: 20px;
    border-top: 1px solid #fafafa;
    padding: 20px 0;
    text-align: center;
    font-size: 14px;
    color: #888;
    h1 {
      font-size: 17px;
    }
    .margin {
      margin: 10px 0;
    }
    p {
      margin: 5px 0;
      span {
        margin: 0 10px;
      }
    }
  }
}
</style>
